<template>
    <div class="CounterOrder f-cb">
        <!-- <open-account-pregress v-if="isModify==1"></open-account-pregress> -->
        <div class="title">{{$t('m.CounterOrder')}}</div>
        <el-form label-position="left" :label-width="lang=='en'?'180px':'120px'" :model="formLabelAlign" ref="formLabelAlign" :rules="rules">
            <el-form-item :label="$t('m.name')" prop="name">
                <el-input v-model="formLabelAlign.name" :placeholder="$t('m.Pleaseenter')+$t('m.Realname')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.contactNumber')" prop="contact">
                <el-input v-model="formLabelAlign.contact" :placeholder="$t('m.Pleaseenterthecontactnumber')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.Estimatedwitness')" prop="appointDate">
                <el-date-picker 
                v-model="formLabelAlign.appointDate" 
                type="date" 
                :placeholder="$t('m.Pleaseselectwitnessdate')"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('m.Estimatedwitnesstime')" prop="appointTime">
                <el-time-picker 
                    v-model="formLabelAlign.appointTime" 
                    format="HH:mm"
                    value-format="HH:mm"
                    type="date" 
                    :placeholder="$t('m.Pleaseselectthewitnesstime')"
                ></el-time-picker>
            </el-form-item>
            <div class="CounterOrderTips" v-html="tips"></div>
        </el-form>
        <div class="mainLandBtns f-cb">
            <span class="fl return" @click="returnLinks">{{$t('m.Previousstep')}}</span>
            <span class="fr next" @click="SubmitLinks">{{$t('m.CounterOrder')}}</span>
        </div>
    </div>
</template>

<script>
    import {pageFlow,BtnsFlow,submit,getsubscript} from "@/common/common";
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    export default {
        components: {openAccountPregress},
        data() {
            return{
                formLabelAlign:{
                    name:"",
                    contact:"",
                    appointDate:"",
                    appointTime:"",
                    sceneId:'',
                    legalizeType:"",

                },
                dialogVisible:false,
                tips:"",
                lang:sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en',
                rules:{
                    name:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.Realname')}
                    ],
                    contact:[
                        { required: true, message: this.$t('m.Pleaseenterthecontactnumber')}
                    ],
                    appointDate:[
                        { required: true, message: this.$t('m.Pleaseselectwitnessdate')}
                    ],
                    appointTime:[
                        { required: true, message: this.$t('m.Pleaseselectthewitnesstime')}
                    ]
                },
                num:0,
            }
        },
        computed:{
            flowInfo(){
                return JSON.parse(sessionStorage.getItem('flowInfo'))
            },
            appointment(){
                return JSON.parse(sessionStorage.getItem('appointment'))
            },
            isModify(){
                return Number(sessionStorage.getItem('isModify'))
            }
        },
        mounted(){
            window.document.title = this.$t('m.CounterOrder')
            this.formLabelAlign.legalizeType = sessionStorage.getItem('legalizeType');
            this.num = getsubscript(this.flowInfo)
            if(Number(sessionStorage.getItem('isModify')) == 2){
                this.getflow(this.appointment.extra)
            }else{
               this.getflow(this.flowInfo.page_flow[this.num])
            }
        },
        methods:{
            OpencloseDialog(){
                this.dialogVisible = !this.dialogVisible;
            },
            SubmitLinks(){
                var _this = this;
                // this.dialogVisible = false;
                var data = {
                    pageId:_this.flowInfo.page_info.id,
                    isModify:Number(sessionStorage.getItem('isModify')),
                    fields:_this.formLabelAlign,
                }
                this.$refs['formLabelAlign'].validate((valid) => {
                    if (valid) {
                        submit(data,res => {
                            var res = res.data;
                            if(res.code == 1){
                                if(_this.flowInfo.page_info.id == _this.flowInfo.page_flow[_this.flowInfo.page_flow.length - 1]){
                                    _this.$router.replace({ path:'/examine'});
                                }else{
                                    _this.BtnsFlowBtn()
                                    //_this.flowInfo.page_flow[_this.num + 1]
                                }
                            }else if(res.code == 401){
                                _this.$router.replace({path:'/'})
                            }else{
                                _this.$message({
                                    message: res.msg,
                                    type: "warning"
                                })
                            }
                        })
                    }
                }); 
            },
            BtnsFlowBtn(page){
                var _this = this;
                BtnsFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 102){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            getflow(page){
                var _this = this;
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.branch.length != 0){
                            _this.tips = res.data.page_info.branch.web[1]['bottom_tip_'+_this.lang]
                        }
                        if(JSON.stringify(res.data.user_fill) != '{}'){
                            _this.formLabelAlign = res.data.user_fill;
                        }
                        if(sessionStorage.getItem('sceneId')){
                            this.formLabelAlign.sceneId = sessionStorage.getItem('sceneId');
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else if(res.code == 102 || res.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            returnLinks(){
                this.$router.replace({ path:'/CounterAddress'});
            }
        },
        watch:{

        },
    }
</script>

<style lang="less">
    .CounterOrder{
        padding-top:38px;
        width: 460px;
        margin:0 auto;
        .title{
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
            margin-bottom: 9px;
        }
        .mainLandBtns{
            width: 100%;
            span{
                cursor: pointer;
                width: 180px;
                height: 36px;
                line-height: 36px;
                border-radius:3px;
                display:block;
                text-align: center;
                font-size: 14px;
                transition: opacity 0.3s;
            }
            span:hover{
                opacity: 0.8;
            }
            span.return{
                background: @e7e6eb;
                color: @000;
            }
            span.next{
                background: @hoverColor;
                color: @fff;
            }
        }
        .el-form-item{
            margin-bottom:16px;
            border-bottom: 1px solid @e7e6eb;
            .el-form-item__label{
                color: @titleColor;
            }
            .el-date-editor.el-input{
                width: 100%;
                .el-input__inner{
                    background: url(~@/assets/examine10.png) no-repeat right center;
                }
            }
            .el-input__inner{
                border:none;
                width: 100%;
                display: block;
            }
        }
        .el-form{
            padding-bottom:150px;
        }
        .CounterOrderTips{
            font-size: 14px;
            color: @titleColor;
            line-height:20px;
        }
        .tips_dialog{
            position: absolute;
            margin: 0 !important;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .el-dialog__body{
                text-align: center;
            }
            .el-button{
                width:80px;
                display: inline-block;
            }
        }
    }
</style>